<template>
  <div class="find_home">
        <!-- 搜索框开始 -->
			<div class="search">
				<div class="logo">
          <img src="~assets/images/find/logo.png" alt="">
        </div>
				<div class="center" v-on:click='search()'>
					<i class="iconfont icon-magnifier"></i>
          搜索
				</div>
			</div>
      <!-- 轮播图开始 -->
      <mt-swipe :auto="4000" :show-indicators="false">
        <mt-swipe-item class="slide" v-for="item in imgarr"><img :src="item.src | renderImg" alt=""  :key="item.id"></mt-swipe-item>
      </mt-swipe>
      <!-- 分类 -->
      <div class="classify">
        <div class="classify_all">
          <div class="classify_item" v-for='item in fenlei'>
            <div class="img">
                <img src="~assets/images/find/file.png" alt="">
            </div>
            <div class="txt">{{item.name}}</div>
          </div>
        </div>
      </div>
      <!-- 近期活动 -->
        <div class="ongoing">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>进行中</div>
        </div>
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">时间管理八法</div>
                    <div class="type">
                        专题讲座
                    </div>
                    <div class="class">2017-10-15 15:45:23</div>
                </div>
            </li>
             <list-empty msg='近期暂无活动~'></list-empty>
        </ul>
      </div>
      <!-- 最热 -->
       <div class="ongoing">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>最热</div>
        </div>
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">时间管理八法</div>
                    <div class="type">
                        专题讲座
                    </div>
                    <div class="class">2017-10-15 15:45:23</div>
                </div>
            </li>
             <list-empty msg='暂无最热内容哦~'></list-empty>
        </ul>
      </div>
      <!-- 最新 -->
       <div class="ongoing">
        <div class="tit">
            <div class="line"></div>
            <div class='txt'>最新</div>
        </div>
        <ul class="all_class">
            <li v-for="n in 5">
                <div class="left">
                    <img :src=" src|renderImg(330,240)" alt="">
                </div>
                <div class="right">
                    <div class="name">时间管理八法</div>
                    <div class="type">
                        专题讲座
                    </div>
                    <div class="class">2017-10-15 15:45:23</div>
                </div>
            </li>
             <list-empty msg='暂无最新内容哦~'></list-empty>
        </ul>
      </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "mint-ui";
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
import listEmpty from "@/components/logic/list_empty";
export default {
  name: "find_home",
  components: {
    listEmpty
  },
  data() {
    return {
      imgarr: [
        {id:"1",src:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4116854589,3398106150&fm=27&gp=0.jpg"},
        {id:"1",src:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1828826993,1512147445&fm=27&gp=0.jpg"},
        {id:"1",src:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3849988021,4205696003&fm=27&gp=0.jpg"}
      ],
      fenlei: [
        { name: "IT" },
        { name: "设计" },
        { name: "语言" },
        { name: "职业" },
        { name: "慕课" },
        { name: "直播" },
        { name: "技术" },
        { name: "职场" },
        { name: "公司" }
      ],
      src:""
    };
  },
  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {
    // 跳转到搜索页
    search:function(){
        this.$router.push({ name: "find_search"});
    }
  }
};
</script>
<style scoped lang='less'>
.find_home {
  .search {
    height: 0.25rem;
    padding: 0.08rem 0.09rem;
    background: #ffffff;
    display: flex;
    .logo {
      width: 0.45rem;
      text-align: center;
      img {
        display: inline-block;
        max-width: 0.25rem;
        height: auto;
        border-radius: 50%;
      }
    }
    .center {
      flex: 1;
      background: #f3f2f8;
      height: 0.25rem;
      line-height: 0.25rem;
      color: #999999;
      border-radius: 0.25rem;
      text-align: center;
    }
  }
  // 轮播图
  .mint-swipe {
    height: 1.4rem;
    .slide {
      height: 1.4rem;
      img {
        width: 100%;
        height: 1.4rem;
      }
    }
  }
  // 分类
  .classify {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    height: 1rem;
    white-space: nowrap;
    .classify_all {
      width: auto;
      height: 0.8rem;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      .classify_item {
        display: inline-block;
        height: 1rem;
        width: 20%;
        text-align: center;
        .img {
          width: 100%;
          height: 0.5rem;
          img {
            width: 0.35rem;
            height: 0.35rem;
            border-radius: 50%;
            margin-top: 0.1rem;
          }
        }
        .txt {
          color: #333333;
          font-size: 0.12rem;
        }
      }
    }
  }
  // 列表
  .ongoing {
    padding: 0 0.15rem;
    margin-top: 0.05rem;
    background: #ffffff;
    .tit {
      display: flex;
      padding: 0.15rem 0;
      .txt {
        flex: 1;
        color: #333333;
        height: 0.16rem;
        line-height: 0.16rem;
        padding-left: 0.08rem;
      }
    }
    .all_class {
      padding: 0 0.15rem;
      li {
        border-top: 0.01rem solid #f0f1f4;
        padding: 0.15rem 0;
        display: flex;
        .left {
          width: 1.1rem;
          height: 0.8rem;
          border-radius: 0.05rem;
          img {
            width: 1.1rem;
            height: 0.8rem;
            border-radius: 0.05rem;
          }
        }
        .right {
          flex: 1;
          padding-left: 0.13rem;
          .name {
            height: 0.24rem;
            line-height: 0.24rem;
            color: #333333;
          }
            .type {
              padding: 0.1rem 0 0.12rem 0;
              color: #999999;
              height: 0.13rem;
              font-size: 0.12rem;
              line-height: 0.13rem;
            }
          .class {
            font-size: 0.12rem;
            height: 0.22rem;
            line-height: 0.22rem;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
